<template>
  <tr>
    <td v-for="item in header" :key=item.prop :style="{color: item.color&&one[item.prop]>0 ? 'red': ''}" :class="item.tooltip ? 'ellipsis-wrap': ''">
      <el-popover
        popper-class="common-tootip"
        placement="top-start"
        width="300"
        trigger="hover"
        v-if="item.tooltip"
        :disabled="one[item.prop] === 0"
        @show="show(item.prop)"
        :content="content[item.prop]">
        <span slot="reference" class="pop">{{one[item.prop] || 0}}</span>
      </el-popover>
      <template v-else-if="item.prop === 'queueWaitCount'"> 
        <!-- 排队数的钻入 -->
        <span :style="one[item.prop] > 0 ? 'cursor:pointer;color:#459ae9' : ''" @click.stop="jumpIntoDetail(one)">
          {{one[item.prop]}}
        </span>
      </template>
      <template v-else>
        {{one[item.prop]}}
      </template>
    </td>
  </tr>
</template>
<script>
  export default {
    name: 'trQueue',
    data () {
      return {
        content: {
          totalAgentCount: '',
          idleAgentCount: '',
          callingAgentCount: '',
          busyStateAgentCount: ''
        }
      }
    },
    props: {
      one: {type: Object, default: function () { return {} }},
      header: {type: Array, default: function () { return [] }}
    },
    methods: {
      show (type) {
        let members = this.one.members || []
        let arr = []
        for (let i in members) {
          let peer = window._phone_peersFromSip[i] || {}
          if (type === 'totalAgentCount') {
            arr.push(`${peer.DisplayName}[${peer.exten}]`)
          } else if (type === 'idleAgentCount') {
            if (peer.callStatus === 'Idle' && peer.busyType === '0') {
              arr.push(`${peer.DisplayName}[${peer.exten}]`)
            }
          } else if (type === 'callingAgentCount') {
            if (peer.callStatus !== 'Idle') {
              arr.push(`${peer.DisplayName}[${peer.exten}]`)
            }
          } else if (type === 'busyStateAgentCount') {
            if ((peer.callStatus === 'Idle' && peer.busyType !== '0') || peer.register === false) {
              arr.push(`${peer.DisplayName}[${peer.exten}]`)
            }
          }
          this.content[type] = arr.join(' ,  ')
        }
      },
      jumpIntoDetail (item) {
        this.$emit('jumpIntoDetail', item, 'queue')
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .ellipsis
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
    max-width 100%
    display inline-block
  .ellipsis-wrap
    max-width 400px
  .pop
    color $c-main
</style>
